<template>
  <div class="add-item-wrapper">
    <div class="add-item-btn" @click="handleShowBtnClick" v-show="showBtn">
      +
    </div>
    <div class="add-item-content" v-show="!showBtn">
      <textarea v-model="value" rows="3" cols="30"></textarea>
      <!-- 添加具体任务列表 -->
      <ul class="add-item-content-list" v-show="showTaskList">
        <li>设置开始时间</li>
        <li>设置结束时间</li>
        <li class="priority-wrapper">
          <span @click="handleShowPriority">优先级</span>
          <ol class="priority-dialog" v-show="showPriority">
            <li
              v-for="(item, index) in priority"
              :class="priorityIndex === index ? 'active' : ''"
              :key="item"
              @click="handlePrioritySelect(index)"
            >
              {{ item }}
            </li>
          </ol>
        </li>
      </ul>
      <button @click="handleShowTaskList" v-show="!showTaskList">更多</button>
      <button @click="handleCreateTask">创建</button>
    </div>
  </div>
</template>

<script>
/**
 * 三个显示隐藏
 * 1.
 */
export default {
  data() {
    return {
      // 优先级展示数据
      priority: ['较低', '普通', '紧急', '非常紧急'],
      value: '', // 输入框数据
      showBtn: true,
      showPriority: false,
      showTaskList: false,
      // 优先级下标，用来展示数据使用，需要添加到 任务数组中
      priorityIndex: 0,
    }
  },
  methods: {
    // 处理按钮显示还是添加输入框内容显示
    handleShowBtnClick() {
      this.showBtn = !this.showBtn
    },
    // 处理是否显示优先级弹出框
    handleShowPriority() {
      this.showPriority = !this.showPriority
    },
    // 处理添加任务列表的显示隐藏
    handleShowTaskList() {
      this.showTaskList = true
    },
    // 处理优先级选中事件
    handlePrioritySelect(index) {
      this.priorityIndex = index
    },
    // 点击创建任务按钮
    handleCreateTask() {
      // 内容不为空再做操作
      if (this.value) {
        // 让更多按钮显示，让任务列表隐藏
        this.showTaskList = false
        // 添加内容成功后，让输入框隐藏，让+按钮显示
        this.showBtn = true
        // 点击创建的时候，每次只能生成一个任务内容，
        // 需要把整个任务内容传递给父组件，让父组件把存储到一个数组中
        // 逻辑往走上
        this.$emit('onCreateTask', {
          id: Date.now(),
          value: this.value,
          priority: this.priorityIndex,
          createTime: Date.now(),
          deadlineTime: Date.now() + 2 * 60 * 60 * 1000,
          check: false,
        })
        this.value = ''
      } else {
        alert('请输入内容')
      }
    },
    moduseDownCallback(e) {
      // console.log(e.target)
      // if (e.target.className) {
      //   this.showBtn = true
      // }
    },
  },
  mounted() {
    document.addEventListener('mousedown', this.moduseDownCallback)
  },
  destroyed() {
    // 原生事件，vue控制不了，需要我们自己取消监听
    document.removeEventListener('mousedown', this.moduseDownCallback)
  },
}
</script>

<style lang="scss" scoped>
.add-item-wrapper {
  padding: 5px;
  margin: 10px;
  width: 275px;
  box-shadow: 0px 0px 20px #ccc;
  .add-item-btn {
    height: 20px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    margin: 5px;
    cursor: pointer;
    // background: #eee;
  }
}
.add-item-content-list {
  li {
    // display: inline-block;
    width: 100px;
    text-align: center;
    line-height: 20px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
  }
  .priority-wrapper {
    position: relative;
    .priority-dialog {
      position: absolute;
      right: -107px;
      top: 26px;
      margin: 3px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      .active {
        background: red;
        color: gold;
      }
    }
  }
}
</style>
